import React, { Suspense } from 'react';
import './App.css';

// 导入路由相关的依赖
import { HashRouter as Router, Route, Switch, Redirect} from 'react-router-dom'

import AuthRoute from './components/AuthRoute'

// 导入子组件
/**
import Login from './views/login'
import Layout from './views/layout'
import CityList from './views/citylist'
import Map from './views/map'
import Detail from './views/detail'
import Rent from './views/rent'
import RentAdd from './views/rent/add'
import RentSearch from './views/rent/search'
import NotFound from './views/notfound'
* 
 */
const Login = React.lazy(() => import('./views/login'))
const Layout = React.lazy(() => import('./views/layout'))
const CityList = React.lazy(() => import('./views/citylist'))
const Map = React.lazy(() => import('./views/map'))
const Detail = React.lazy(() => import('./views/detail'))
const Rent = React.lazy(() => import('./views/rent'))
const RentAdd = React.lazy(() => import('./views/rent/add'))
const RentSearch = React.lazy(() => import('./views/rent/search'))
const NotFound = React.lazy(() => import('./views/notfound'))

// 测试组件
// import ReduxIndex from './test/redux'

function App() {
  return (
    <div className="App" style={{height:'100%'}}>
      <Suspense fallback={<div>Loading...</div>}>
      <Router>
        <Switch>
          <Route path='/login' component={Login}/>
          <Route path='/layout' component={Layout}/>
          <Route path='/citylist' component={CityList}/>
          <Route path='/map' component={Map}/>
          <Route path='/detail/:id' component={Detail}/>

          {/* 测试组件 */}
          {/* <Route path='/redux' component={ReduxIndex}></Route> */}

          {/* 路由导航守卫,有些路由跳转有权限才可以跳转,没有权限就去登录 */}
          <AuthRoute exact path='/rent' component={Rent}/>
          <AuthRoute path='/rent/add' component={RentAdd}/>
          <AuthRoute path='/rent/search' component={RentSearch}/>

          <Redirect exact from='/' to='/layout'/>
          <Route component={NotFound}/>
        </Switch>
      </Router>
      </Suspense>
    </div>
  );
}

export default App;
